<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useAuth } from '@/composables/useAuth'
import AppHeader from '@/components/common/AppHeader.vue'
import SearchInput from '@/components/SearchInput.vue'
import { Vue3Lottie } from 'vue3-lottie'
import { PhGithubLogo, PhTwitterLogo, PhEnvelope } from '@phosphor-icons/vue'
import LoadingAnimationData from '@/assets/lotties/Wait I am Loading.json'

/**
 * 初始化主题系统
 */
const { initTheme, currentTheme, getThemeClasses } = useTheme()

/**
 * 用户认证
 */
const { initAuth } = useAuth()

/**
 * 搜索功能
 */
const showSearchBox = ref(false)
const searchQuery = ref('')

/**
 * 回到顶部按钮显示控制
 */
const showScrollToTop = ref(false)

/**
 * 切换搜索框显示状态
 */
const toggleSearchBox = (): void => {
  showSearchBox.value = !showSearchBox.value
  if (!showSearchBox.value) {
    searchQuery.value = ''
  }
}

/**
 * 关闭搜索框
 */
const closeSearchBox = (): void => {
  showSearchBox.value = false
  searchQuery.value = ''
}

/**
 * 执行搜索
 */
const handleSearch = (): void => {
  if (searchQuery.value.trim()) {
    // TODO: 实现搜索逻辑
    console.log('搜索:', searchQuery.value)
    closeSearchBox()
  }
}

/**
 * 回到顶部
 */
const scrollToTop = (): void => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

/**
 * 处理滚动事件
 */
const handleScroll = (): void => {
  showScrollToTop.value = window.scrollY > 300
}

/**
 * 键盘事件处理
 */
const handleKeydown = (event: KeyboardEvent): void => {
  if (event.key === 'Escape' && showSearchBox.value) {
    closeSearchBox()
  }
}

onMounted(() => {
  initTheme()
  initAuth()
  // 添加全局键盘事件监听
  document.addEventListener('keydown', handleKeydown)
  // 添加滚动事件监听
  window.addEventListener('scroll', handleScroll)
})

// 清理事件监听器
onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div id="app" :class="getThemeClasses()">
    <!-- Header -->
    <AppHeader :show-search-box="showSearchBox" @toggle-search="toggleSearchBox" />

    <!-- 搜索模态框 -->
    <Transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100"
      leave-to-class="opacity-0"
    >
      <div
        v-if="showSearchBox"
        class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-start justify-center pt-20"
        @click="closeSearchBox"
      >
        <Transition
          enter-active-class="transition-all duration-300 ease-out"
          enter-from-class="transform -translate-y-8 opacity-0 scale-95"
          enter-to-class="transform translate-y-0 opacity-100 scale-100"
          leave-active-class="transition-all duration-200 ease-in"
          leave-from-class="transform translate-y-0 opacity-100 scale-100"
          leave-to-class="transform -translate-y-8 opacity-0 scale-95"
        >
          <div
            v-if="showSearchBox"
            @click.stop
            class="w-full max-w-2xl mx-4 bg-base-100 rounded-2xl sm:rounded-3xl shadow-2xl border border-base-300/50 overflow-hidden"
          >
            <!-- 搜索头部 -->
            <div class="p-4 sm:p-6 pb-3 sm:pb-4">
              <div class="flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
                <span class="text-xl sm:text-2xl">🔍</span>
                <h2 class="text-lg sm:text-xl font-semibold text-base-content">搜索文章</h2>
              </div>

              <!-- 搜索输入框 -->
              <SearchInput
                v-model="searchQuery"
                placeholder="搜索文章标题、内容、作者..."
                :autofocus="true"
                @search="handleSearch"
                @close="closeSearchBox"
              />
            </div>

            <!-- 搜索提示 -->
            <div class="px-4 sm:px-6 pb-4 sm:pb-6">
              <div class="bg-base-200/50 rounded-xl sm:rounded-2xl p-3 sm:p-4">
                <p class="text-xs sm:text-sm text-base-content/70 text-center mb-2 sm:mb-3">
                  输入关键词搜索文章，支持标题、内容和作者搜索
                </p>
                <div class="flex justify-center gap-2 sm:gap-3">
                  <div class="flex items-center gap-1 sm:gap-2 text-xs text-base-content/60">
                    <kbd class="kbd kbd-xs sm:kbd-sm">Enter</kbd>
                    <span class="hidden sm:inline">搜索</span>
                  </div>
                  <div class="flex items-center gap-1 sm:gap-2 text-xs text-base-content/60">
                    <kbd class="kbd kbd-xs sm:kbd-sm">Esc</kbd>
                    <span class="hidden sm:inline">关闭</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Transition>
      </div>
    </Transition>

    <!-- Main Content -->
    <main class="min-h-screen pt-14 sm:pt-16">
      <router-view v-slot="{ Component, route }">
        <transition :name="(route.meta.transition as string) || 'page'" mode="out-in" appear>
          <component :is="Component" :key="route.path" />
        </transition>
      </router-view>
    </main>

    <!-- Footer -->
    <footer class="footer footer-center p-6 sm:p-8 md:p-10 bg-base-200 text-base-content">
      <div class="grid grid-flow-col gap-3 sm:gap-4">
        <router-link to="/" class="link link-hover text-sm sm:text-base">首页</router-link>
        <router-link to="/blog" class="link link-hover text-sm sm:text-base">博客</router-link>
        <router-link to="/about" class="link link-hover text-sm sm:text-base">关于</router-link>
      </div>

      <div class="grid grid-flow-col gap-3 sm:gap-4">
        <a href="#" class="link link-hover" title="GitHub">
          <PhGithubLogo class="w-5 h-5 sm:w-6 sm:h-6" />
        </a>
        <a href="#" class="link link-hover" title="Twitter">
          <PhTwitterLogo class="w-5 h-5 sm:w-6 sm:h-6" />
        </a>
        <a href="#" class="link link-hover" title="Email">
          <PhEnvelope class="w-5 h-5 sm:w-6 sm:h-6" />
        </a>
      </div>

      <div class="text-center px-4">
        <p class="text-xs sm:text-sm md:text-base text-base-content/70">
          © 2024 我的博客. 使用
          <span class="text-primary font-semibold">{{ currentTheme.name }}</span> 主题
        </p>
        <p class="text-xs sm:text-sm text-base-content/50 mt-1">
          {{ currentTheme.description }}
        </p>
      </div>
    </footer>

    <!-- 全局右下角回到顶部按钮 -->
    <Transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0 scale-0 translate-y-4"
      enter-to-class="opacity-100 scale-100 translate-y-0"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100 scale-100 translate-y-0"
      leave-to-class="opacity-0 scale-0 translate-y-4"
    >
      <div
        v-if="showScrollToTop"
        class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-30 cursor-pointer group scroll-to-top-btn"
        @click="scrollToTop"
        title="点击回到顶部"
      >
        <Vue3Lottie
          :animationData="LoadingAnimationData"
          :height="80"
          :width="80"
          class="sm:hidden opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300"
          :speed="0.8"
          :loop="true"
          :autoplay="true"
        />
        <Vue3Lottie
          :animationData="LoadingAnimationData"
          :height="120"
          :width="120"
          class="hidden sm:block opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-300"
          :speed="0.8"
          :loop="true"
          :autoplay="true"
        />
      </div>
    </Transition>
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

/* 页面过渡动画 */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--b2));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--bc) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--bc) / 0.5);
}

/* 搜索按钮脉冲动画 */
.btn-circle.btn-primary {
  animation: pulse-primary 2s infinite;
}

@keyframes pulse-primary {
  0%,
  100% {
    box-shadow: 0 0 0 0 hsl(var(--p) / 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px hsl(var(--p) / 0);
  }
}

/* 工具提示样式增强 */
.tooltip:before {
  background: hsl(var(--b1));
  color: hsl(var(--bc));
  border: 1px solid hsl(var(--b3));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tooltip:after {
  border-top-color: hsl(var(--b1));
}

/* 下拉菜单动画 */
.dropdown-content {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 渐变文字效果 */
.bg-clip-text {
  background-clip: text;
  -webkit-background-clip: text;
}

/* 链接样式 */
.link-hover:hover {
  color: hsl(var(--p));
}

/* 无障碍访问 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* 回到顶部按钮样式 */
.scroll-to-top-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.scroll-to-top-btn:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
  background: rgba(255, 255, 255, 0.2);
  animation: pulse-glow 2s infinite;
}

.scroll-to-top-btn:active {
  transform: translateY(0) scale(0.95);
}

/* 脉冲发光动画 */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 hsl(var(--p) / 0.7);
  }
  50% {
    box-shadow: 0 0 0 15px hsl(var(--p) / 0);
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .btn {
    border-width: 2px;
  }

  .card {
    border-width: 2px;
  }
}

/* 打印样式 */
@media print {
  .navbar,
  .footer {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
  }
}
</style>
